<template>
  <Tabs type="card" @on-click="tabChange">
    <TabPane v-for="(tab, index) in tabList" :key="index" :label="tab.label" :name="tab.name">
      <div v-if="tab.order===1">
        <Row style="padding:20px">
          <Col span="24"  style="background-color: #ffffff;border-radius: 20px;">
            <Card shadow style="border-radius: 20px;">
              <p slot="title"><Icon type="ios-checkmark-circle" />提案同意比例</p>
              <p style="text-align: center;">当前比例为：{{executeRatio}}</p>
              <p style="text-align: center;color: #378600" v-if="executeRatio>=60&&executeRatio<=90"><Icon type="md-checkmark-circle" style="color: #378600"/>同意比例符合区间</p>
              <p style="text-align: center;color: red" v-if="executeRatio<60"><Icon type="ios-alert-outline" style="color: red"/>比例过低，请适当调高同意比例</p>
              <p style="text-align: center;color: red" v-if="executeRatio>90"><Icon type="ios-alert-outline" style="color: red"/>比例过高，请适当调低同意比例</p>
              <Slider v-model="executeRatio"  :marks="marks" :tip-format="format" @on-change="executeRatioModal = true"></Slider>
            </Card>
          </Col>
        </Row>
        <Row style="padding:20px">
          <Col span="24"  style="background-color: #ffffff;border-radius: 20px">
            <Card shadow style="border-radius: 20px;">
              <p slot="title"><Icon type="ios-calendar" />提案审议时间</p>
              <p style="text-align: center;"><Icon type="ios-calendar-outline" />当前审议时间为：{{executeTime}} 天</p>
              <p style="text-align: center;color: #378600" v-if="executeTime>=25"><Icon type="md-checkmark-circle" style="color: #378600"/>审议时间符合区间</p>
              <p style="text-align: center;color: red" v-if="executeTime<25"><Icon type="ios-alert-outline" style="color: red"/>审议时间过低，请适当调高同意比例</p>
              <Slider v-model="executeTime"  :marks="markTime" :tip-format="formatTime" @on-change="executeTimeModal = true" :max="50" :min="1"></Slider>
            </Card>
          </Col>
        </Row>
        <Modal v-model="executeRatioModal" width="360">
          <p slot="header" :style="{'color':`${executeRatioStatus}`,'text-align':'center'}">
            <Icon type="ios-information-circle"></Icon>
            <span>设置提案同意比例</span>
          </p>
          <div :style="{'color':`${executeRatioStatus}`,'text-align':'center'}">
            <p>{{executeRatioStatus==='#f60'? '您设置的提案同意比例不在合适区间内，请重新取值':'您设置的提案同意比例在合适区间内，继续完成设置'}}</p>
          </div>
          <div slot="footer">
            <Button :type="executeRatioStatus==='#f60'? 'error':'primary'" size="large" long  @click="executeRatioStatus==='#f60'? executeRatioModal = false:confirmExecuteRation()">{{executeRatioStatus==='#f60'? '返回':'设置'}}</Button>
          </div>
        </Modal>

        <Modal v-model="executeTimeModal" width="360">
        <p slot="header" :style="{'color':`${executeTimeStatus}`,'text-align':'center'}">
          <Icon type="ios-information-circle"></Icon>
          <span>设置提案审议时间</span>
        </p>
        <div :style="{'color':`${executeTimeStatus}`,'text-align':'center'}">
          <p>{{executeTimeStatus==='#f60'? '您设置的提案审议时间不在合适区间内，请重新取值':'您设置的提案审议时间在合适区间内，继续完成设置'}}</p>
        </div>
        <div slot="footer">
          <Button :type="executeTimeStatus==='#f60'? 'error':'primary'" size="large" long  @click="executeTimeStatus==='#f60'? executeTimeModal = false:confirmExecuteTime()">{{executeTimeStatus==='#f60'? '返回':'设置'}}</Button>
        </div>
        </Modal>
      </div>
      <div v-if="tab.order===2" >
        <Row style="padding:20px">
          <Col span="24"  style="background-color: #ffffff;border-radius: 20px">
            <Card shadow style="border-radius: 20px">
              <p slot="title" style="height: 30px!important;">所有申请记录<Button type="warning" size="small" style="float: right" @click="autoExecuteDel">自动退款</Button></p>
              <Table :data="proposalList" :columns="proposalListColumns" height="600px" stripe></Table>
            </Card>
          </Col>
        </Row>
        <Row style="padding:20px">
        </Row>
      </div>
    </TabPane>
  </Tabs>

</template>
<script>
import TimeJS from "@/utils/Time"
import {Message} from "element-ui";
import Web3 from "web3";

export default {
  data(){
    return{
      executeRatio:0,
      marks: {
        0: {
          style: {
            color: '#131813'
          },
          label: this.$createElement('strong', '0')
        },
        60: {
          style: {
            color: '#ffa641'
          },
          label: this.$createElement('strong', '60%')
        },
        90: {
          style: {
            color: '#ff0000'
          },
          label: this.$createElement('strong', '90%')
        }
      },
      executeRatioModal:false,
      executeRatioStatus:'',
      executeTimeModal:false,
      executeTime:this.timeToDay(86400000*27),
      markTime:{
        1: {
          style: {
            color: '#131813'
          },
          label: this.$createElement('strong', '1天')
        },
        25: {
          style: {
            color: '#ffa641'
          },
          label: this.$createElement('strong', '25天')
        },
        45: {
          style: {
            color: '#000000'
          },
          label: this.$createElement('strong', '45天')
        }
      },
      executeTimeStatus:'',
      leagueInfo:{
        total:0,
        leagueCommittee:0,
        leagueManager:0,
        leagueMembers:0,
        superviseMembers:0
      },
      carbonInfo:{
        createToken:0,
        destoryToken:0,
        buyToken:0,
        ratio:0+"%"
      },
      tabList: [
        {
          label: '提案配置',
          order:1,
          name: '提案配置'
        },
        {
          label: '申请记录',
          order:2,
          name: '申请记录'
        }
      ],
      proposalList: this.getProposalList(),
      proposalListColumns: [
        {
          title: '交易hash',
          key: 'ptransfer_hashID',
          render: (h, params) => {
            return h('Poptip', {
              props: {
                trigger: 'hover',
                title: '交易hash',
                placement: 'right'
              }
            }, [
              h('Tag', params.row.ptransfer_hashID),
              h('div', {
                slot: 'content'
              }, [
                h('ul', params.row.ptransfer_hashID)
              ])
            ]);
          }
        },
        {
          title: '交易状态',
          key: 'transactionStatus',
          sortable: true,
          filters: [
            {
              label: '已退款',
              value: 'Refund'
            },
            {
              label: '已交易',
              value: 'Success'
            },
            {
              label: '已支付',
              value: 'Paid'
            }
          ],
          filterMethod (value, row) {
            return row.transactionStatus.indexOf(value) > -1;
          },
          render: (h, params) => {
            const row = params.row;
            const color = row.transactionStatus === "Paid" ? 'primary' : row.transactionStatus === "Success" ? 'success' : 'error';
            const text = row.transactionStatus === "Paid" ? '已支付' : row.transactionStatus === "Success" ? '已交易' : '已退款';

            return h('Tag', {
              props: {
                type: 'dot',
                color: color
              }
            }, text);
          }
        },
        {
          title: '申请用户地址',
          key: 'chairperson',
          render: (h, params) => {
            return h('Poptip', {
              props: {
                trigger: 'hover',
                title: '用户地址',
                placement: 'bottom'
              }
            }, [
              h('Tag', params.row.chairperson),
              h('div', {
                slot: 'content'
              }, [
                h('ul', params.row.chairperson)
              ])
            ]);
          }
        },
        {
          title: '支持率',
          key: 'voteRatio',
          sortable: true,
          render: (h, params) => {
            return h('Tag', params.row.voteRatio+'%');
          }
        },
        {
          title: '申请时间',
          key: 'pData',
          width: 200,
          align: 'center',
          sortable: true,
          render: (h, params) => {
            return h('div', TimeJS.unixToWhole(parseInt(params.row.pData)));
          }
        },
        {
          title: '截止时间',
          key: 'limitTime',
          width: 200,
          align: 'center',
          sortable: true,
          render: (h, params) => {
            return h('div', TimeJS.unixToWhole(parseInt(params.row.limitTime)));
          }
        },
        {
          title: 'Action',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.transferBack(params.row.ptransfer_hashID)
                  }
                }
              }, '退款')
            ]);
          }
        }
      ],
    }
  },
  created() {

  },
  mounted() {
    this.LeagueJS.getExecuteRatio(value=>{
      this.executeRatio = value
      this.marks = {
        0: {
          style: {
            color: '#131813'
          },
          label: this.$createElement('strong', '0')
        },
        60: {
          style: {
            color: '#ffa641'
          },
          label: this.$createElement('strong', '60%')
        },
        [value]: {
          style: {
            color: '#378600'
          },
          label: this.$createElement('strong', `Now ${value}%`)
        },
        90: {
          style: {
            color: '#ff0000'
          },
          label: this.$createElement('strong', '90%')
        }
      }
    })
    this.LeagueJS.getTimeLimit(value=>{
      this.executeTime = value
      this.markTime = {
        1: {
          style: {
            color: '#131813'
          },
          label: this.$createElement('strong', '1天')
        },
        25: {
          style: {
            color: '#ffa641'
          },
          label: this.$createElement('strong', '25天')
        },
        45: {
          style: {
            color: '#000000'
          },
          label: this.$createElement('strong', '45天')
        },
        [value]: {
          style: {
            color: '#378600'
          },
          label: this.$createElement('strong', `Now ${value}天`)
        },
      }
    })
  },
  watch:{
    "tab.order":function (val){
    },
    "executeRatio":function (val) {
      if(val<60||val>90){
        this.executeRatioStatus = '#f60'
      }else if(val>=60&&val<=90){
        this.executeRatioStatus = '#378600'
      }
    },
    "executeTime":function (val) {
      if(val<25){
        this.executeTimeStatus = '#f60'
      }else if(val>=25){
        this.executeTimeStatus = '#378600'
      }
    }
  },
  methods: {
    timeToDay(unix){
      return TimeJS.unixToDay(unix)
    },
    format (val) {
      return val + '%';
    },
    formatTime(val){
      val = new Date(new Date().getTime()+(60 * 60 * 24)*val*1000)
      console.log(val)
      return TimeJS.unixToWhole(val);
    },
    tabChange(name){
      if(name === "产销总览"){
        this.LeagueJS.getCarbonFactoryHistory(info=>{
          console.log(info)
        })
      }
    },
    confirmExecuteRation(){
      this.LeagueJS.setExecuteRatioByM(this.executeRatio,status=>{
        if(status){
          this.executeRatioModal = false
          Message.success("设置提案同意比例成功")
        }else {
          Message.error("设置提案同意比例失败")
        }
      })
    },
    confirmExecuteTime(){
      this.LeagueJS.setTimeLimitByM(TimeJS.dataToUnixByDay(this.executeTime),status=>{
        if(status){
          this.executeTimeModal = false
          Message.success("设置提案审议时间成功")
        }else {
          Message.error("设置提案审议时间失败")
        }
      })
    },
    getProposalList () {
      let data = [];
      this.LeagueJS.getProposalsInfo(0,list=>{
        list.map((i,j)=>{
          let str={
            ptransfer_hashID:i.ptransfer_hashID,
            transactionStatus:i.transactionStatus,
            pName:i.pName,
            chairperson:i.chairperson,
            contact:i.contact,
            pData:i.pData,
            pCost:i.pCost,
            voteRatio:i.voteRatio,
            executed:i.executed,
            executedData:i.executedData,
            limitTime:i.limitTime,
            transactionTokenTotal:i.transactionTokenTotal
          }
          data.push(str)
          j++
        })
      })
      return data;
    },
    show (index) {
      this.$Modal.info({
        title: 'Info',
        width:1000,
        content: `交易hash：${this.proposalList[index].ptransfer_hashID}<br>申请用户名称：${this.proposalList[index].pName}<br>申请用户地址：${this.proposalList[index].chairperson}<br>联系方式：${this.proposalList[index].contact}<br>申请时间：${TimeJS.unixToWhole(parseInt(this.proposalList[index].pData))}<br>申请手续费：${Web3.utils.fromWei(this.proposalList[index].pCost)} Ether<br>附议比例：${this.proposalList[index].voteRatio}<br>执行：${this.proposalList[index].executed}<br>执行时间：${TimeJS.unixToWhole(parseInt(this.proposalList[index].executedData))}<br>限期时间：${TimeJS.unixToWhole(parseInt(this.proposalList[index].limitTime))}<br>交易状态：${this.proposalList[index].transactionStatus=== "Paid" ? '已支付' : row.transactionStatus === "Success" ? '已交易' : '已退款'}<br>总信用：${this.proposalList[index].transactionTokenTotal}`
      })
    },
    transferBack (index) {
      console.log(index)
      // this.proposalList.splice(index, 1);
    },
    autoExecuteDel(){
      this.LeagueJS.autoDelByMSG(status=>{
        if(status){
          this.proposalList =  this.getProposalList()
          Message.success("自动退款成功")
        }else {
          Message.error("自动退款失败")
        }
      })
    }
    }
}
</script>
<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
